.video-management{
  $leftWidth: 360px;
  $color: #E8F3FE;
  $navHeight: 48px;
  $baseMargin: 12px;
  $colorOn: #4f9fff;

  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .video-body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    color: $color;
    background: #0B1D30;
    line-height: normal;
    font-size: 14px;
    .video-nav{
      width: $leftWidth;
      height: $navHeight;
      line-height: $navHeight;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      z-index: 98;
      .nav-item{
        font-size: 16px;
        color: rgba(232,243,254,0.7);
        cursor: pointer;
        position: relative;
        z-index: 2;
        &.cuur{
          color: $color;
          font-weight: 500;
          text-shadow: 0px 0px 10px rgba(74,141,254,0.7);
          &:after{
            content: "";
            width: 112px;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: url("~@/views/pages/video/img/video-ty/nav_bottom.png") no-repeat bottom center / 100% auto;
            pointer-events: none;
          }
        }
      }
      .left-change{
        font-size: 19px;
        line-height: 1;
        position: absolute;
        right: $baseMargin;
        top: 50%;
        color: $color;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 3;
        &:hover{
          opacity: 0.6;
        }
        &:active{
          opacity: 0.8;
        }
      }
      &:after{
        content: "";
        width: 100%;
        height: 1px;
        background: linear-gradient(270deg, rgba(255,255,255,0) 0%, #FFFFFF 50%, rgba(255,255,255,0) 100%);
        opacity: 0.2;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .module{
      width: 100%;
      height: 100%;
      display: flex;
    }
    .video-left{
      width: $leftWidth;
      height: 100%;
      position: relative;
      z-index: 88;
      padding-top: $navHeight + $baseMargin;
      padding-bottom: $baseMargin;
      background: #172537;
      .video-left-body{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .fit-content{
          flex: 1;
          transition: all 0.5s;
          display: flex;
          flex-direction: column;
          min-height: 30%;
          padding: 0 12px;
          &.more{
            min-height: calc(100% - 58px);
          }
        }
      }
      .tree-more, .tree-bottom{
        flex: none;
        z-index: 6;
      }
      .tree-more{
        height: 20px;
        line-height: 20px;
        margin: 0 $baseMargin;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        i{
          color: $color;
          font-size: 20px;
          margin: 0 6px;
          &:hover{
            opacity: 0.6;
          }
          &:active{
            opacity: 0.8;
          }
        }
        &:before, &:after{
          content: "";
          display: block;
          flex: 1;
          height: 1px;
          background: rgba(232,243,254,0.2);
        }
      }
      .tree-bottom{
        max-height: calc(70% - 20px);
        overflow: auto;
        padding: 0 $baseMargin;
        &.more{
          overflow: visible;
        }
      }
      .is-yuan{
        margin: 0 0 $baseMargin;
        .c-select{
          width: 120px;
          .el-select-dropdown__wrap{
            max-height: 256px;
          }
        }
      }
      .camera-tree{
        overflow: auto;
        position: relative;
        flex: 1;
        .el-tree{
          .el-tree__empty-text{
            text-align: center;
            padding-bottom: 8px;
            color: $color;
            &:before{
              content: url("~@/assets/image/noData.png");
              display: block;
              margin-bottom: 12px;
            }
          }
        }
      }
      &.real-single{
        .video-real{
          padding-top: 0 !important;
          .play-item{
            &:after{
              border: 0 !important;
            }
            .closed{
              display: none !important;
            }
          }
        }
      }
      .icon-on{
        color: $colorOn !important;
      }
      &.has-map{
        display: flex;
        flex-direction: column;
        .video-left-body{
          flex: 1;
          min-height: 0;
          overflow: hidden;
        }
        .video-map-position-body{
          width: 100%;
          max-height: 64px;
          overflow: hidden;
          padding-top: 6px;
          transition: all 0.5s;
          &.show-map{
            max-height: 50%;
          }
        }
      }
    }

    .video-right{
      flex: 1;
      height: 100%;
      min-width: 0;
      position: relative;
      .plug-in-switch{
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        position: absolute;
        top: 7px;
        right: 12px;
        overflow: hidden;
        z-index: 8;
        font-size: 14px;
        background: rgba(19,115,230,0.2);
        .item{
          display: block;
          float: left;
          padding: 0 18px;
          cursor: pointer;
          line-height: inherit;
          color: rgba(232,243,254,0.7);
          &:hover{
            opacity: 0.6;
          }
          &:active{
            opacity: 0.8;
          }
          &.on{
            background: linear-gradient(180deg, rgba(123, 170, 248, 0.7) 0%, rgba(123,170,248,0.245) 100%);
            color: $color;
            font-weight: 500;
            opacity: 1;
            cursor: default;
          }
        }
      }
      .plug-in-btn{
        position: absolute;
        top: 8px;
        left: 12px;
        overflow: hidden;
        z-index: 8;
        display: flex;
        align-items: center;
        .item{
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: $color;
          margin: 0 1px;
          position: relative;
          z-index: 2;
          &.on{
            color: $colorOn;
          }
          i{
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
          }
        }
      }
      .video-real, .video-history{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
      }
      .video-real, .video-history{
        padding-top: 45px;
        display: flex;
        flex-direction: column;
        .video-play{
          flex: 1;
          width: 100%;
          position: relative;
          z-index: 2;
          overflow: hidden;
          .play-item{
            .closed{
              display: none;
              width: 38px;
              height: 38px;
              position: absolute;
              top: -3px;
              right: 2px;
              z-index: 12;
              background: url("~@/views/pages/video/img/video-ty/close.png") no-repeat center / 100% 100%;
              opacity: 0;
            }
            &:hover{
              .closed{
                opacity: 1;
              }
            }
            &.playing{
              .closed{
                display: block;
              }
            }
          }
          &.video-snap .play-item.playing .closed{
            opacity: 1;
          }
        }
        .video-play-opt-bottom{
          height: 36px;
          background: rgba(79, 159, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 6px;
          .play-opt-btns{
            display: flex;
            align-items: center;
            .item{
              min-width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
              color: $color;
              margin: 0 1px;
              padding: 0 5px;
              position: relative;
              z-index: 2;
              &.on{
                color: $colorOn;
              }
              i{
                font-size: 20px;
                line-height: 1;
                cursor: pointer;
              }
              .split-screen{
                display: none;
                position: absolute;
                padding: 12px;
                bottom: calc(100% + 12px);
                left: 50%;
                background: #0F1926;
                word-break: keep-all;
                white-space: nowrap;
                line-height: normal;
                z-index: 4;
                transform: translateX(-50%);
                border-radius: 8px;
                grid-template-columns: repeat(var(--column, 2), 1fr);
                gap: 12px;
                &:after{
                  content: "";
                  width: 0;
                  height: 0;
                  border: 8px solid transparent;
                  border-top-color: #0F1926;
                  position: absolute;
                  top: 100%;
                  left: 50%;
                  transform: translateX(-50%);
                }
                &.show{
                  display: grid;
                }
              }
            }
          }
        }
      }
    }
    .video-set{
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      background: #0F1926;
      &:before{
        content: "";
        width: 100%;
        height: $navHeight;
        position: absolute;
        left: 0;
        top: 0;
        background: #172537;
        z-index: 2;
        pointer-events: none;
      }
    }
    &.left-hide{
      .video-left{
        margin-left: -$leftWidth;
      }
    }

    .plugIn-container{
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .el-loading-mask{
      background: none;
      .el-loading-spinner .path{
        stroke: $color;
      }
    }
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: rgba(79,159,255,0.4);
      border: 0;

      &:hover {
        background-color: rgba(79,159,255,0.55);
      }
    }
    ::-webkit-scrollbar-track {
      border-radius: 0;
      background: none;
      box-shadow: none;
    }
  }
}
